<!-- 授权绑定微信 -->
<template>
  <div class="auth-bind-wx">
    <el-form :model="fm.ps" :rules="fm.rules" :ref="fm.fname" size="medium">
      <div class="fm-title">授权绑定微信</div>
      <el-form-item>
        <el-input style="width:200px;transform: scale(2.5);margin-left:240px;" prefixIcon="Iphone" placeholder="请输入手机号码"
          maxlength="11" clearable v-model="fm.ps.phone" type='number'></el-input>
      </el-form-item>
      <div style='margin-top:100px;display:flex;justify-content: center;width:100%; transform: scale(2.5);'>
        <el-button icon="Connection" :loading="fm.sb.load" type="primary" @click="subForm">立即绑定</el-button>

      </div>

      <div class="fm-tip">注意：此绑定主要用于接收微信公众号订单消息，<span v-if="fm.ps.tabIndex == '2'">仅用于车队驾驶员使用！</span></div>
    </el-form>
  </div>
</template>

<script>
import { scopy } from '@/utils/common.js'
import {
  valAuthPhone
} from '@/api/wx_api.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
export default {
  name: 'AuthBindWx',
  data() {
    return {
      fm: {
        sb: { load: false },
        fname: 'loginFm',
        ps: {
          phone: '',
          tabIndex: ""
        },
        rules: {
          phone: [
            { required: true, message: '请输入登录手机号' },
            { min: 11, max: 11, message: '手机号由11位数字组成' }
          ]
        }
      },
    }
  },
  created() {
    document.title = '授权绑定微信';

  },
  mounted() {
    let url = window.location.href;
    var str1 = url.split('?')[1]
    var str2 = str1.split('=')[1]
    this.fm.ps.tabIndex = str2
  },
  methods: {
    // 表单提交
    subForm() {

      let that = this, fm = that.fm, ps = scopy(fm.ps), sb = fm.sb;

      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;
          const loading = that.$loading({
            lock: true,
            text: '绑定中，请稍后...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          // let ps2 = {
          //    phone: '15982808024',
          // tabIndex: "2"
          // }
          valAuthPhone(ps).then(res => {
            if (res.code == 1) {
              console.log(res)
              loading.close();
              // 直接跳转至授权url
              // window.location.href = 'https://cba360.com/kcbservice-company/#/auth-bind-success';
              window.location.href = res.data

            } else {
              sb.load = false;
              loading.close();
              return ElMessage({
                message: res.msg,
                type: 'warning',
              })
            }
          })

          setTimeout(() => { sb.load = false; loading.close(); }, 10000);
        }
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.auth-bind-wx {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .fm-title {
    text-align: center;
    font-size: 40px;
    margin-bottom: 80px;
  }

  .fm-tip {
    margin-top: 70px;
    font-size: 36px;
    color: #666;
  }

  .el-form {
    background: #fff;
    box-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
    padding: 30px;
    width: 70%;
    border-radius: 5px;
    height: 600px;

    ::v-deep(input) {
      color: #2979ff;
      font-weight: bold;
    }
  }
}
</style>
